<template>
	<view class="container">
		<tui-navigation-bar :isFixed="true" :isOpacity="false" splitLine :zIndex="99999" :scrollTop="0" title="" backgroundColor="#fff" color="#333">
      <view style="height: 40px;display: flex;align-items: center;">
        <view style="width: 15rpx;" @click="handleBack"></view>
        <image v-if="share" @click="handleToIndex" src="https://static.wddzq.com/static/shouye-xuanzhong.png" style="width: 30rpx;height: 30rpx;padding: 15rpx;background-color: #f2f2f2;border: 2rpx solid #ddd;border-radius: 50%;" />
        <u-icon v-else name="arrow-left" size="45" @click="handleBack"></u-icon>
        <text style="font-size: 28rpx;" >{{detail?.productName}}</text>
      </view>
		</tui-navigation-bar>
		<view :style="{height: headerHeight + 'px'}"></view>

    <view class="header-wrapper">
      <image style="width: 100%; height: auto;" mode="widthFix" :src="detail?.productPic"/>
      <view class="header-promp">
        <image src="/static/pack/promp-bg.png" mode="scaleToFill" class="promp-bg"/>
        <view class="header-promp-content-wrapper">
          <view class="header-promp-left-wrapper">
            <text class="price-unit">¥</text>
            <text class="price-text">{{detail?.price}}</text>
            <text class="price-name">补贴价</text>
            <text class="price-original">原价 ¥{{detail?.originalPrice}}</text>
          </view>

          <view class="header-promp-right-wrapper">
            <text class="top-name">超值补贴</text>
            <text class="bottom-count">已拼{{detail?.saleCount}}+份</text>
          </view>
        </view>
      </view>
    </view>

    <view class="desc-image-wrapper">
      <image v-for="(item, index) in detail.descPicList" :src="item" mode="widthFix" style="width: 100%"/>
    </view>

<!--    <view class="radius-wrapper">-->
<!--      <text class="title inner-title">36瓶鸡尾酒畅饮 2023兔然暴富</text>-->
<!--      <view class="item1-wrapper">-->
<!--        <text class="item1-left">须知</text>-->
<!--        <text class="item1-right">周一至周日可用</text>-->
<!--      </view>-->
<!--      <view class="item1-wrapper">-->
<!--        <text class="item1-left">须知</text>-->
<!--        <text class="item1-right">周一至周日可用</text>-->
<!--      </view>-->
<!--    </view>-->

<!--    <text class="title">团购详情</text>-->

<!--    <view class="radius-wrapper">-->
<!--      <text class="team-title">Roi鸡尾酒36瓶</text>-->
<!--      <text class="item2">酒水分类：鸡尾酒</text>-->
<!--      <text class="item2">酒水名称：Roi鸡尾酒</text>-->
<!--      <text class="item2">酒精度：3.5%Vol</text>-->
<!--      <text class="item2">体积：275ml</text>-->
<!--      <text class="item2">酒水口味：微甜</text>-->
<!--    </view>-->

<!--    <text class="title">购买须知</text>-->

<!--    <view class="radius-wrapper">-->
<!--      <view class="item3-wrapper">-->
<!--        <text class="item3-left">须知</text>-->
<!--        <text class="item3-right">周一至周日可用</text>-->
<!--      </view>-->
<!--    </view>-->

		<view style="height: 150rpx;"></view>

		<view class="active-bottom">
      <view class="home-btn" @click="navigateToShopDetail">
        <image src="/static/pack/shop-home-icon.png"/>
      </view>

      <view class="share-box">
        <button class="share-box-btn" open-type="share"></button>
        <image src="https://static.wddzq.com/static/fenxiang.png"></image>
      </view>

      <view class="action-btn-wrapper" @click="navigateToPublish">
        <view class="action-btn-top-wrapper">
         <view class="action-btn-top-price-wrapper">
           <text class="action-btn-price-unit">¥</text>
           <text class="action-btn-price">{{detail?.price}}</text>
         </view>
          <text class="action-btn-price-name">补贴价</text>
          <text class="action-btn-price-original">原价 {{detail?.originalPrice}}</text>
        </view>

        <text class="action-btn-tip">立即发起拼单</text>
      </view>
		</view>

	</view>
</template>

<script>
	import {getProductById} from "@/config/api";
  import {getSystemInfo, to} from '@/config/utils.js';

  export default {
		data() {
			return {
				detail: {
          "descPicList": null,
          "id": null,
          "originalPrice": null,
          "price": null,
          "productName": null,
          "productPic": null,
          "saleCount": null,
          "suggestedNumber": null,
        },
        share: false,
        // 传过来的id
        params: {},
        headerHeight: 0,
			}
		},
    onLoad(params) {
      this.params = params;

      let system = getSystemInfo();
      if(system) {
        this.headerHeight = 44 + (system.statusBarHeight || 20);
      }
    },
		onShow() {
      this.fetchProductListById();
		},
		onReady() {
      let pages = getCurrentPages();
      if(pages.length <= 1) {
        this.share = true;
      }
		},
		onShareAppMessage() {
			return {
				title: this.detail?.productName??"",
			  path: `/pages/pack/pack?productId=${this.params.productId}`,
			  imageUrl: this.detail?.productPic,
			};
		},
		methods: {
      navigateToPublish(){
        uni.navigateTo({
          url: `/pages/publish/publish?productId=${this.detail.id}`
        })
      },
      handleShareImgClick() {
        if(!this.checked) {
          return uni.showToast({
            title: '请先选择模板!'
          })
        }
        this.showShareImg = true;
        this.handleShareClose();
        this.createCanvasImage(this.detail);
      },
      navigateToShopDetail(){
        // webview的堆栈
        const pages = getCurrentPages()
        if(!(pages.length >= 2 && pages[pages.length - 2].route.indexOf('pages/detail/detail') >= 0)){
          uni.navigateBack();
        } else {
          uni.navigateTo({
            url: `/pages/shop-detail/shop-detail?storeId=${this.detail.merchantId}`
          })
        }
      },
      handleBack() {
        uni.navigateBack();
      },
      handleToIndex() {
        uni.switchTab({
          url: '/pages/index/index'
        })
      },
      async fetchProductListById(){
        const [err, response] = await to(getProductById({
          productId: this.params.productId,
        }));
        if(err || !response.success){
          return uni.showToast({
            title: err.msg || response.msg || '套餐详情加载失败',
            icon: 'none'
          })
        }
        this.detail = {
          ...response.data,
          descPicList: response?.data?.descPicList?.split(','),
        };
      }
		}
	}
</script>

<style>

  .container{
  background-color: #F2F2F2;
}

  .header-wrapper{
    position: relative;
  }

  .desc-image-wrapper{
    display: flex;
    flex-direction: column;
  }

  .header-promp{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .promp-bg{
    display: block;
    width: 100%;
    height: 124rpx;
  }
  .header-promp-content-wrapper{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 24rpx;
    right: 24rpx;
    display: flex;
    justify-content: space-between;
  }
  .header-promp-left-wrapper{
    display: flex;
    align-items: baseline;
  }
  .price-unit{
    font-size: 26rpx;
    font-weight: 600;
    margin-right: 2rpx;
    color: white;
  }
  .price-text{
    font-size: 56rpx;
    font-weight: bold;
    color: #FFFFFF;
    margin-right: 8rpx;
  }
  .price-name{
    font-size: 24rpx;
    font-weight: 600;
    color: #FFFFFF;
    margin-right: 16rpx;
  }
  .price-original{
    font-size: 28rpx;
    font-weight: 600;
    color: rgba(255, 255, 255, .8);
    text-decoration: line-through;
  }

  .header-promp-right-wrapper{
    display: flex;
    flex-direction: column;
  }
  .top-name{
    font-size: 32rpx;
    font-family: HYYakuHei-GEW, HYYakuHei;
    font-weight: normal;
    color: #FFFFFF;
    padding-bottom: 8rpx;
  }
  .bottom-count{
    font-size: 22rpx;
    font-weight: 400;
    color: #FFFFFF;
    letter-spacing: 1px;
  }

  .radius-wrapper{
    display: flex;
    flex-direction: column;
    padding: 24rpx;
    margin: 24rpx;
    border-radius: 18rpx;
    background-color: white;
  }

  .title{
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    padding-left: 24rpx;
  }

  .title.inner-title{
    width: 100%;
    padding: 8rpx 0 32rpx;
    border-bottom: 1rpx solid #EEE;
    margin-bottom: 8rpx;
  }

  .item1-wrapper{
    display: flex;
    padding: 8rpx 0;
  }
  .item1-left{
    font-size: 24rpx;
    font-weight: bold;
    color: #333333;
    margin-right: 24rpx;
  }
  .item1-right{
    font-size: 24rpx;
    font-weight: 400;
    color: #666666;
  }

  .team-title{
    font-size: 26rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 16rpx;
  }
  .item2{
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    margin-bottom: 16rpx;
  }

  .item3-wrapper{
    display: flex;
  }
  .item3-left{
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    margin-right: 48rpx;
  }
  .item3-right{
    font-size: 24rpx;
    font-weight: 400;
    color: #333333;
  }

	.active-bottom {
		display: flex;
    justify-content: space-between;
		position: fixed;
		left: 0;
    right: 0;
		bottom: 0;
		background-color: #fff;
		padding: 30rpx 48rpx;
		box-sizing: border-box;
		box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(0,0,0,0.02);
		z-index: 1000;
	}
  .home-btn {
    position: relative;
    width: 44rpx;
    height: 88rpx;
  }
	.share-box {
    position: relative;
    width: 44rpx;
    height: 88rpx;
	}
  .home-btn image,.share-box image {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
		width: 44rpx;
		height: 44rpx;
	}
	.share-box text {
		font-size: 24rpx;
		color: #666;
	}
	.share-box-btn {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
    z-index: 9;
	}
  .action-btn-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 486rpx;
    height: 88rpx;
    background: #030303;
    border-radius: 44rpx;
  }
  .action-btn-top-wrapper{
    display: flex;
    align-items: center;
  }
  .action-btn-top-price-wrapper{
    display: flex;
    align-items: baseline;
    margin-right: 4rpx;
  }
  .action-btn-price-unit{
    font-size: 26rpx;
    font-weight: 500;
    color: #FFFFFF;
  }
  .action-btn-price{
    font-size: 36rpx;
    font-weight: 500;
    color: #FFFFFF;
    margin-right: 4rpx;
  }
  .action-btn-price-name{
    padding: 0 8rpx;
    height: 28rpx;
    background: #FF8F1F;
    border-radius: 14rpx 14rpx 14rpx 2rpx;
    line-height: 28rpx;
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    margin-right: 8rpx;
  }
  .action-btn-price-original{
    font-size: 26rpx;
    font-weight: 500;
    color: #FFFFFF;
  }
  .action-btn-tip{
    font-size: 22rpx;
    font-weight: 400;
    color: #FFFFFF;
  }

</style>
